<script setup>
import { valueEquals } from 'element-plus';
import router from '../router';
import { useUserStore } from '/src/store/userStore.js';
const userStore = useUserStore();
const activeIndex = '1';
</script>


<template>
    <el-container>
        <el-header>
        <el-row>
           <el-col :span="4" style="display: flex; flex-direction: row;align-items: center;"> 
            <img src="/images/logo.png" style="height: 60px;"/>
            <h2 style="padding-left: 6px;">技术社区</h2>
           </el-col>
           <el-col :span="8">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              style="border-bottom: none !important;"
            >
              <el-menu-item index="1">
                <router-link to="/">首页</router-link>
              </el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">
                <router-link to="/mall">商城</router-link>
              </el-menu-item>
            </el-menu>
           </el-col>
           <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden-xs-only">
            <el-input />
           </el-col>
           <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px" class="hidden-only-sm;">
          <div v-if="!userStore.isLoggedIn">
            <el-link type="primary">
              <router-link to="/login">登录</router-link>
            </el-link>
            <el-link type="primary" style="padding-left: 4px">
              <router-link to="/reg">注册</router-link>
            </el-link>
          </div>
          <div v-else>
            <img src="/images/avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
            <el-link type="primary" style="padding-left: 4px">
              <router-link to="/person">{{ userStore.user?.username }}</router-link>
            </el-link>
          </div>
        </el-col>
        </el-row>
        </el-header>
    </el-container>
</template>